<template>
    <div class="mod-config">
      <el-form :inline="true" :model="dataForm" >
        <el-form-item>
          <el-input v-model="dataForm.key" placeholder="手机账号" clearable></el-input>
        </el-form-item>
       
        <el-form-item>
            <!-- <el-select v-model="dataForm.status" placeholder="请选择支付状态">
          <el-option v-for="(item,index) in payOptions" :key="index" :label="item.label" :value="item.value">
          </el-option>
        </el-select> -->
        <el-select v-model="dataForm.rechargeStatus" placeholder="请选择充值状态">
          <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-form-item>
          <el-date-picker v-model="dateArr" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
            value-format='yyyy-MM-dd HH:mm:ss'>
          </el-date-picker>
        </el-form-item>
      </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
          <el-button type="primary" @click="resetting()">重置</el-button>
          <el-button @click="exportFun()" type="primary">导出</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
        style="width: 100%">
        <el-table-column type="selection" header-align="center" align="center" width="50">
        </el-table-column>
        <el-table-column prop="id" header-align="center" align="center" label="序号">
          <template slot-scope="scope">
            <div v-if="scope.row">
              {{ scope.$index+1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="rechargeAccount" header-align="center" align="center" label="手机号码">
        </el-table-column>
        <el-table-column prop="createTime" header-align="center" align="center" label="充值日期">
          <template slot-scope="scope">
            <span>{{
             scope.row.createTime?getStrTime(scope.row.createTime): ''
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="merchantNo" header-align="center" align="center" label="订单编号">
        </el-table-column>
        <el-table-column prop="totalAmount" header-align="center" align="center" label="充值金额">
        </el-table-column>
        <el-table-column prop="payMoney" header-align="center" align="center" label="支付金额">
        </el-table-column>
        <!-- <el-table-column prop="status" header-align="center" align="center" label="支付状态">
            <template slot-scope="scope">
            <span>{{
              payStatus(scope.row.status)
            }}</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="rechargeStatus" header-align="center" align="center" label="充值状态">
            <template slot-scope="scope">
            <span>{{
              orderStatus(scope.row.rechargeStatus)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createDate" header-align="center" align="center" label="创建日期">
          <template slot-scope="scope">
            <span>{{
             scope.row.createDate?getStrTime(scope.row.createDate): ''
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" header-align="center" align="center" label="备注">
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="adds(scope.row)">查看</el-button>
            <el-button v-if="scope.row.status==2&&scope.row.orderNo==''" type="text" size="small" @click="create(scope.row.merchantNo)">发起充值</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
  
      <el-dialog title="明细" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <div class="sharePopCont">
          <div class="top"><span class="title">手机号码：</span> {{ info.rechargeAccount }}</div>
          <div class="top"><span class="title">当前状态：</span> {{  payStatus(info.status) }}</div>
          <div class="top"><span class="title">支付金额：</span> {{ info.payMoney }}</div>
          <div class="top"><span class="title">实付金额：</span> {{ info.payPrice }}</div>
          <div class="top"><span class="title">下单时间：</span> {{ info.createTime }}</div>
          <div class="top"><span class="title">交易单号：</span> {{ info.outTradeNo }}</div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        baseurl: '',
        dataForm: {
          key: '',
          status:'',
          rechargeStatus:'',
        },
        dialogVisible: false,
        dateArr: [],
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        info: {
  
        },
        payOptions: [
        {
          value: null,
          label: '全部'
        },
        {
          value: 1,
          label: '待支付'
        },
        {
          value: 2,
          label: '已支付'
        },
        {
          value: 3,
          label: '已关闭'
        }
      ],
        options: [
        {
          value: null,
          label: '全部'
        },
        {
          value: 1,
          label: '待充值'
        },
        {
          value: 2,
          label: '充值中'
        },
        {
          value: 3,
          label: '充值完成'
        },
        {
          value: 4,
          label: '充值失败'
        },
        {
          value: 5,
          label: '运营商维护'
        },
        {
          value: 8,
          label: '部分到账'
        }
      ],
      }
    },
    // components: {
    //   VueQr,
    //   },
    activated() {
      this.getDataList()
      this.getUrl()
    },
    computed: {
        payStatus(e) {
            return (e) => {
                switch (e) {
                case 1:
                    return "待支付";
                case 2:
                    return "已支付";
                case 3:
                    return "已关闭";
                }
                
            };
        },
        orderStatus(e) {
            return (e) => {
                switch (e) {
                case 1:
                    return "待充值";
                case 2:
                    return "充值中";
                case 3:
                    return "充值完成";
                case 4:
                    return "充值失败";
                case 5:
                    return "运营商维护";
                case 8:
                    return "部分到账";
                }
            };
        },
    },
    methods: {
        exportFun () {
      const params = {	
        payStatus: this.dataForm.payStatus,
        rechargeAccount: this.dataForm.rechargeAccount,
        rechargeStatus: this.dataForm.rechargeStatus,
        status: this.dataForm.status,
        pageNum: this.pageIndex,
        pageSize: this.pageSize,
      }
      if (this.dateArr && this.dateArr.length > 0) {
        params.startTime = this.dateArr[0]
        params.endTime = this.dateArr[1]
      }
      window.open('http://qxb.18617.cn/dgy/v1/admin/product/order/export?payStatus=' + (this.dataForm.payStatus || '') + '&rechargeAccount=' +( this.dataForm.rechargeAccount||'') + '&rechargeStatus=' + this.dataForm.rechargeStatus + '&pageNum=' + this.pageIndex + '&pageSize=' + this.pageSize + '&status=' + this.dataForm.status + '&startTime=' + (params.startTime || '') + '&endTime=' + (params.endTime || ''))

      // this.$http({
      //   url: this.$http.adornUrl(`/admin/promotionCode/export`),
      //   method: 'get',
      //   params: this.$http.adornParams(params)
      // }).then(({ data }) => {
      //   if (data && data.code === '200') {

      //     this.$message({
      //       message: '操作成功',
      //       type: 'success',
      //       duration: 1500
      //     })
      //   }
      // })
    },
   
         // 发起充值
     create(id) {
        this.$confirm(
            `手动发起充值之后，系统会再次发起充值订单。 `,
            `确定手动发起充值？`,
            {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'danger'
            }
        ).then(() => {
            this.$http({
            url: this.$http.adornUrl('/admin/product/order/create?merchantNo='+id),
            method: 'get',
            }).then(({ data }) => {
            if (data && data.code == '200') {
                this.$message({
                message: '充值成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                    this.getDataList()
                }
                })
            } else {
                this.$message.error(data.msg)
            }
            })
        })
        },
      getUrl() {
        this.$http({
          url: this.$http.adornUrl(
            `/common/base/url?key=` + 'REG_DOMAIN_URL'
          ),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          if (data && data.code === '200') {
            this.baseurl = data.data
          }
        })
      },
      adds(e) {
        this.info = e
        this.dialogVisible = true
      },
      handleClose() {
        this.dialogVisible = false
      },
      resetting() {
        this.dataForm.key = '',
        this.dataForm.status = '',
        this.dataForm.rechargeStatus = '',
        this.dateArr = []
        this.getDataList()
      },
      // 获取数据列表
      getDataList() {
        const params = {
          pageNum: this.pageIndex,
          pageSize: this.pageSize,
          rechargeAccount: this.dataForm.key,
          status: this.dataForm.status,
          rechargeStatus: this.dataForm.rechargeStatus

        }
        if (this.dateArr && this.dateArr.length > 0) {
          params.startTime = this.dateArr[0]
          params.endTime = this.dateArr[1]
        }
        this.$http({
          url: this.$http.adornUrl(`/admin/product/order/page`),
          method: 'post',
          data: this.$http.adornData(params)
        }).then(({ data }) => {
          if (data && data.code === '200') {
            this.dataList = data.list
            this.totalPage = data.total
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val
      },
    }
  }
  </script>
  <style >
  .sharePopCont .title {
    width: 84px;
    flex-shrink: 0;
    color: #000;
  }
  
  .sharePopCont .top {
    display: flex;
    margin-top: 10px;
  }
  
  .sharePopCont .top .btn {
    margin-left: 10px;
  }
  </style>
  